<script lang="ts" setup name="flowableProcessInstance">
import {
  dateTimeToDateTime,
  urls,
  useLoginUserStore,
  getProcessInstanceVOListByConditionsWithPage
} from '@/index';
import type { DialogModelFlowable, flowable } from '@/index.d';
import router from '@/router';
import { useRequest } from 'vue-request';
import ProcessInstanceChooseDialog from './ProcessInstanceChooseDialog.vue';
import MyStartProcessInstanceListDialog from './MyStartProcessInstanceListDialog.vue';

const { loginUser } = useLoginUserStore();

const title = '实例';

const queryCondition = reactive<flowable.ProcessInstanceQueryCondition>({
  currentPage: 1,
  pageSize: 20,
  deleted: false,
  processInstanceKind: '全部流程',
  change: false
});

const resetQueryCondition = () => {
  queryCondition.currentPage = 1;
  queryCondition.pageSize = 20;
  queryCondition.processInstanceKind = '全部流程';
  delete queryCondition.processInstanceId;
  delete queryCondition.processInstanceStartUserId;
  delete queryCondition.processInstanceName;
  delete queryCondition.processInstanceCompleted;
  delete queryCondition.processInstanceInvolvedUser;
  delete queryCondition.processInstanceTaskAssignee;
};

const getProcessInstanceVOListByConditionsWithPagePromise = () => {
  return getProcessInstanceVOListByConditionsWithPage(queryCondition);
};

const {
  data: getProcessInstanceVOListData,
  loading: getProcessInstanceVOListLoading,
  run: getProcessInstanceVOListRun
} = useRequest(getProcessInstanceVOListByConditionsWithPagePromise, { manual: true });

const total = computed<number>(() => {
  if (getProcessInstanceVOListData && getProcessInstanceVOListData.value) {
    return getProcessInstanceVOListData.value.total;
  } else {
    return 1;
  }
});

const handleResetQuery = () => {
  resetQueryCondition();
  getProcessInstanceVOListRun();
};

const showMyStartTask = () => {
  resetQueryCondition();
  queryCondition.processInstanceStartUserId = loginUser.username;
  queryCondition.processInstanceKind = '我起草的';
  getProcessInstanceVOListRun();
};

const showMyDoingTask = () => {
  resetQueryCondition();
  queryCondition.processInstanceTaskAssignee = loginUser.username;
  queryCondition.processInstanceKind = '我的待办';
  getProcessInstanceVOListRun();
};

const showMyDoneTask = () => {
  resetQueryCondition();
  queryCondition.processInstanceInvolvedUser = loginUser.username;
  queryCondition.processInstanceKind = '我参与的';
  getProcessInstanceVOListRun();
};

const processInstanceChooseDialogModel = reactive<DialogModelFlowable>({
  visible: false,
  title,
  type: 'view',
  change: false
});

const handleOpenInsert = () => {
  processInstanceChooseDialogModel.visible = true;
};

const handleView = (row: flowable.ProcessInstanceVO) => {
  router.push(`/flowable/form/${row.processDefinitionKey}/${row.id}`);
};

const getElTextType = (
  processInstanceStatus: flowable.ProcessInstanceState
): '' | 'primary' | 'success' | 'info' | 'warning' | 'danger' => {
  switch (processInstanceStatus) {
    case '完成':
      return '';
    case '进行':
      return 'success';
    case '废弃':
      return 'danger';
    case '暂停':
      return 'warning';
    default:
      return '';
  }
};
//进入tab时，重新加载数据
onActivated(() => getProcessInstanceVOListRun());

const myStartProcessInstanceListDialogModel = reactive<DialogModelFlowable>({
  visible: false,
  title,
  type: 'view',
  change: false
});

const cuiban = () => {
  myStartProcessInstanceListDialogModel.visible = true;
};
</script>
<template>
  <HqContainerTableInstance
    :title
    :total
    @handle-query="getProcessInstanceVOListRun"
    @handle-reset-query="handleResetQuery"
    @handle-reload="getProcessInstanceVOListRun"
    @handle-open-insert="handleOpenInsert"
    v-model:current-page="queryCondition.currentPage"
    v-model:page-size="queryCondition.pageSize"
  >
    <template #search>
      <hq-col kind="search">
        <el-input
          v-model="queryCondition.processInstanceName"
          placeholder="请输入流程实例名称"
          clearable
          @clear="getProcessInstanceVOListRun"
        />
      </hq-col>
      <hq-col kind="search">
        <el-select
          placeholder="请选择流程是否完成"
          v-model="queryCondition.processInstanceCompleted"
          @change="getProcessInstanceVOListRun"
          clearable
        >
          <el-option :value="true" label="完成" />
          <el-option :value="false" label="未完成" />
        </el-select>
      </hq-col>
    </template>
    <template #button>
      <el-button
        type="primary"
        @click="showMyStartTask"
        :disabled="queryCondition.processInstanceKind === '我起草的'"
      >
        我起草的
      </el-button>
      <el-button
        type="primary"
        @click="showMyDoingTask"
        :disabled="queryCondition.processInstanceKind === '我的待办'"
      >
        我的待办
      </el-button>
      <el-button
        type="primary"
        @click="showMyDoneTask"
        :disabled="queryCondition.processInstanceKind === '我参与的'"
      >
        我参与的
      </el-button>
      <el-button
        type="primary"
        @click="handleResetQuery"
        :disabled="queryCondition.processInstanceKind === '全部流程'"
      >
        全部流程
      </el-button>
      <el-button type="primary" @click="cuiban"> 一键催办 </el-button>
    </template>
    <template #table>
      <hq-table-flowable
        :base-url="urls.processInstance"
        :table-data="getProcessInstanceVOListData?.records"
        :loading="getProcessInstanceVOListLoading"
        :title="title"
        operate-column
        @handle-view="handleView"
      >
        <template #columns>
          <hq-table-column prop="processInstanceName" label="processInstanceName" />
          <hq-table-column
            prop="processInstanceStartUserIdName"
            label="processInstanceStartUserId"
          />
          <hq-table-column label="processInstanceStartTime">
            <template #default="{ row }">
              {{ dateTimeToDateTime(row.processInstanceStartTime) }}
            </template>
          </hq-table-column>
          <hq-table-column label="processInstanceEndTime">
            <template #default="{ row }">
              {{ dateTimeToDateTime(row.processInstanceEndTime) }}
            </template>
          </hq-table-column>
          <hq-table-column prop="processInstanceDuration" label="processInstanceDuration" />
          <hq-table-column label="流程状态">
            <template #default="{ row }">
              <el-text :type="getElTextType(row.processInstanceStatus)">
                {{ row.processInstanceStatus }}
              </el-text>
            </template>
          </hq-table-column>
        </template>
      </hq-table-flowable>
    </template>
  </HqContainerTableInstance>
  <ProcessInstanceChooseDialog
    v-if="processInstanceChooseDialogModel.visible"
    v-model:process-instance-choose-dialog-model="processInstanceChooseDialogModel"
  />

  <MyStartProcessInstanceListDialog
    v-if="myStartProcessInstanceListDialogModel.visible"
    v-model:process-instance-choose-dialog-model="myStartProcessInstanceListDialogModel"
  />
</template>
<style lang="scss" scoped></style>
